<template>
  <div id="coupon_index">
    <c-title :hide="false" text="我的优惠券"></c-title>
    <van-sticky>
      <van-tabs
        v-model="selected"
        @click="switchItem"
        :title-active-color="'var(--themeBaseColor)' || '#F15353'"
        line-width="15px"
        title-inactive-color="#00001C"
        :color="'var(--themeBaseColor)' || '#F15353'">
        <block v-for="(item,index) in couponTabs" :key="index">
          <van-tab :name="item.value" :title="item.title"></van-tab>
        </block>
      </van-tabs>
      <div class="coupon-classify" ref="handpickList"  style="overflow: hidden;">
        <div class="activity-scroll">
          <li  v-for="(item, index) in types" :key="index" @click="setTypesIndex(index,item)" :class="index == tabIndex?'on':''">{{ item.name }}</li>
        </div>
      </div>
    </van-sticky>
    <div>
      <div class="coupon-box">
        <div class="coupon-list" v-if="wait_used.length > 0 ">
          <block v-for="(item, index) in wait_used" :key="index">
            <coupon-cell
              :couponItem="item"
              :index="index"
              :combineshow="combine_show"
              :selected="selected"
              :deleteShow="deleteShow"
              :coThemeColor="coThemeColor"
              @delItem="delItem"
              @goDetail="goDetail">
              <template #tag>
                <div class="tag" v-if="item.combine && item.num != 1 ">{{ item.num }}张</div>
                <div class="tag past" v-if="item.near_expiration == 1 && selected == 1">快过期</div>
                <div class="tag iseff" v-if="!item.is_effective && selected == 1">待生效</div>
              </template>
                <template #moreUp>
                  <div class="more flex-a-c" v-if="item.can_spreadShow" @click.stop="closeMoreList(item,index)">
                    收起<span class="iconfont icon-icon_up1"></span>
                  </div>
                </template>
                <template #moreDown>
                  <div class="more flex-a-c" v-if="!item.can_spreadShow && item.can_spread" @click.stop="tapMoreList(item,index)">
                    展开<span class="iconfont icon-icon_down1"></span>
                  </div>
                </template>
                <template #time>
                  <p class="coupon-time" v-show="!item.can_spread">{{ item.time_start }}-{{ item.time_end }}</p>
                </template>
                <template #status>
                  <div class="status-tag">
                    <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/couponV2/overdue.png" v-if="selected == 2" />
                    <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/couponV2/couponsbg_7.png" v-if="selected == 3" />
                  </div>
                </template>
            </coupon-cell>
          </block>
        </div>
        <van-empty v-else/>
        <div class="mb100"></div>
      </div>
    </div>
    <div class="posbtn" @click="toStore" v-if="center_show">
      <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/couponV2/coupons_centerbg@2x.png" alt="" />
    </div>
  </div>
</template>
<script>
import couponcontroller from "./coupon_indexcontroller";

export default couponcontroller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
// @import "../../assets/css/coupon_index.scss";
// @import "../../assets/css/coupon_newind.scss";
#coupon_index ::v-deep .van-tabs__line {
  bottom:1.3125rem;
}
.pcStyle .posbtn {
  right:39%;
}
.shop-coupon ::v-deep .van-button--danger {
  border-radius: 0rem 0.625rem 0.625rem 0rem;
  background-color:var(--themeBaseColor);
  border:none;
}
.shop-coupon ::v-deep .van-button--danger {
  padding:0 0.6875rem;
}
.mb100 {
  height: 9.375rem;
  clear: both;
}
//新样式
.coupon-classify {
  padding:0.75rem 0 0.9375rem 0.9375rem;
  position: relative;
  background-color: #F5F5F5;
  .activity-scroll {
    display: inline-block;
    white-space: nowrap;
    padding:0 0 0 0.9375rem;
      li {
        background: #FFFFFF;
        border-radius: 0.9375rem 0.9375rem 0.9375rem 0.9375rem;
        font-size: 0.8125rem;
        line-height: 0.8125rem;
        padding:0.375rem 0.75rem;
        color: #3B3B4A;
        margin:0 0.625rem 0 0;
        cursor: pointer;
        display: inline-block;
        white-space: nowrap;
        min-width: 3.125rem;
        box-sizing: border-box;
      }
      .on {
        border: 0.0625rem solid var(--themeBaseColor);
        color:var(--themeBaseColor);
        position: relative;
        &::after {
          content: "";
          width:100%;
          height: 100%;
          background-color: var(--themeBaseColor);
          opacity: 0.1;
          position: absolute;
          left:0;
          top:0;
        }
      }
    }
}
.coupon-list {
  margin: 0 0.75rem;
  .shop-coupon {

    margin:0 0 0.625rem 0;
    position: relative;

    .coupon-content {
      border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
      position: relative;
      z-index: 2;
      background-color: #fff;
    }
    .shop-after {
      width:calc(100% - 1.125rem);
      height: 100%;
      background: linear-gradient(298deg, var(--themeBaseColor) 0%, #FFFCFC 100%);
      border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
      height: 5.625rem;
      position: absolute;
      top:0.25rem;
      left:0.5625rem;
      z-index: -2;
      &::before {
        content: "";
        position: absolute;
        top: -50%;
        bottom: -50%;
        left: -50%;
        right: -50%;
        transform: scale(0.5);
        border: solid 0.0625rem var(--themeBaseColor);
        border-radius: 1.25rem 1.25rem 1.25rem 1.25rem;
        box-sizing:border-box;
      }
    }
    .shop-before {
      width:calc(100% - 3rem);
      height: 100%;
      background: linear-gradient(298deg, var(--themeBaseColor) 0%, #FFFCFC 100%);
      border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
      height: 5.625rem;
      position: absolute;
      top:0.5rem;
      left:1.5rem;
      z-index: -3;
      &::before {
        content: "";
        position: absolute;
        top: -50%;
        bottom: -50%;
        left: -50%;
        right: -50%;
        transform: scale(0.5);
        border: solid 0.0625rem var(--themeBaseColor);
        border-radius: 1.25rem 1.25rem 1.25rem 1.25rem;
        box-sizing:border-box;
      }

    }

    .shop-couponNew {
      border-radius: 0.625rem;
      height: 5.625rem;
      position: relative;
      .tag {
        color: #FFFFFF;
        font-size: 0.75rem;
        line-height: 0.75rem;
        padding:0.1875rem 0.375rem;
        position:absolute;
        left:0;
        top:0;
        border-radius: 0.625rem 0rem 0.5rem 0rem;
        background: var(--themeBaseColor);
      }
      .past {
        background: #FFF0E8;
        color:#F96D20;
      }
      .iseff {
        color:#fff;
        background: #B6B6B6;
      }
      .left {
        width:30%;
        height: calc(100% - 1.0625rem);
        flex-direction: column;
        position: relative;
        border-right: 0.0625rem dashed #D6D6DC;
        // padding:0 1.5rem;
        min-width: 6.875rem;
        margin:0.5625rem 0 0.5rem 0;
        h3 {
          color:var(--themeBaseColor);
          font-weight: bold;
          font-size: 1.5rem;
          span {
            font-size: 0.8125rem;
          }
        }
        p {
          color: var(--themeBaseColor);
          font-size: 0.75rem;
        }

      }
      .coupon-wrap {
        width:70%;
        height: 100%;
        flex-direction: column;
        padding:0 0.75rem;
        flex:1;
        position: relative;
        .coupon-circle {
          content:'';
          position: absolute;
          width: 0.5rem;
          height: 0.5rem;
          background-color: #F5F5F5;
          border-radius: 50%;
          top:-0.25rem;
          left:-0.3438rem;
        }
        .coupon-circle2 {
          content:'';
          position: absolute;
          width: 0.5rem;
          height: 0.5rem;
          background-color: #F5F5F5;
          border-radius: 50%;
          bottom:-0.25rem;
          left:-0.3438rem;
          z-index:1;
        }
        .title {
          text-align: left;
          font-size: 0.875rem;
          font-weight: bold;
          color: #00001C;
        }
        .assign-shop {
          padding:0.375rem 0 0 0;
          .shop {
            font-size: 0.75rem;
            line-height: 0.75rem;
            padding:0.1875rem 0.3125rem;
            border-radius: 0.3125rem 0.3125rem 0.3125rem 0.3125rem;
            position: relative;
            color: var(--themeBaseColor);
            &::after {
              content: '';
              width:100%;
              height: 100%;
              background: var(--themeBaseColor);
              opacity: 0.08;
              position: absolute;
              z-index: 0;
              left:0;
              top:0;
            }
          }
          .more {
            color: #6E6E79;
            font-size: 0.75rem;
            .iconfont {
              margin:0 0 0 0.25rem;
              font-size: 0.75rem;
            }
          }
        }
        .coupon-time {
          font-size: 0.75rem;
          color: #6E6E79;
          padding:0.3125rem 0 0 0;
          text-align: left;
        }
        .status-tag {
          position: absolute;
          top:0.5625rem;
          right:0.5rem;
          img {
            width: 3.75rem;
            height: 3.25rem;
            display: block;
          }
        }
      }
    }

  }
  .shop-gray {
    .shop-couponNew {
      .left {
        h3,p {
          color:#6E6E79;
        }
      }
      .coupon-wrap {
        .assign-shop {
          .shop {
            color:#AAAAB3;
            &::after {
              background-color: #AAAAB3;
            }
          }
        }
        .coupon-time {
          color:#AAAAB3;
        }

      }
    }
  }
  .shop-mg {
    margin:0 0 1.125rem 0;
    &::after {
      content: '';
      width:100%;
      height: 100%;
      background: linear-gradient(180deg, var(--themeBaseColor) 0%, #FFFFFF 100%);
      position: absolute;
      z-index: -1;
      left:0;
      top:0;
      border-radius: 0.625rem;
    }
    &::before {
      content: "";
      position: absolute;
      top: -50%;
      bottom: -50%;
      left: -50%;
      right: -50%;
      transform: scale(0.5);
      border: solid 0.0625rem var(--themeBaseColor);
      border-radius: 1.25rem 1.25rem 1.25rem 1.25rem;
      box-sizing:border-box;
      z-index: -1;
    }
    .coupon-wrap {
      .coupon-circle {
        &::before {
          content: "";
          position: absolute;
          top: -50%;
          bottom: -50%;
          left: -50%;
          right: -50%;
          transform: scale(0.5);
          border: solid 0.0625rem var(--themeBaseColor);
          box-sizing:border-box;
          border-radius: 50%;
        }
      }
      .coupon-circle2 {
        background: linear-gradient(180deg, var(--themeBaseColor) 0%, #FFFFFF 100%);
        &::before {
          content: "";
          position: absolute;
          top: -50%;
          bottom: -50%;
          left: -50%;
          right: -50%;
          transform: scale(0.5);
          // border: solid 0.0625rem var(--themeBaseColor);
          box-sizing:border-box;
          border-radius: 50%;
        }
      }
    }
  }

}


.posbtn {
  position: fixed;
  bottom: 5rem;
  right:-1.25rem;
  z-index:10;
  img {
    width: 7.875rem;
  }
}
</style>
